<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('API调用示例')" />
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-merchant-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">通道类型：</label>
            <div class="col-sm-8">
                <select name="type" id="type"  class="form-control" th:with="type=${@dict.getType('channel_type')}" onchange="changeType()">
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">通道编码：</label>
            <div class="col-sm-8">
                <select name="channel" id="channel"  class="form-control" onchange="changeChannel()">
                    <option value="">所有</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">通道账号：</label>
            <div class="col-sm-8">
                <!--                    <select name="realChanleCode" id="realChanleCode" class="form-control"-->
                <!--                            th:with="type=${@realChannel.selectTRealChannelList(null)}">-->
                <!--                        <option value="">所有</option>-->
                <!--                        <option th:each="dict : ${type}" th:text="${dict.realChannelName}"-->
                <!--                                th:value="${dict.realChannelCode}"></option>-->
                <!--                    </select>-->
                <select name="recipientId" id="recipientId" class="form-control">
                    <option value="">所有</option>
                </select>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">金额：</label>
            <div class="col-sm-8">
                <input name="money" id="money" class="form-control" type="text" placeholder="订单金额不能为空" required>
            </div>
        </div>

    </form>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>发起支付</button>&nbsp;
        </div>
    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js"/>

<script type="text/javascript">
    var prefix = ctx + "demo/pay"
    var requrl ="";
    $("#form-merchant-add").validate({
        onkeyup: false,
        rules: {
            amount: {
                isMoney:true
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var currentId = $('form').attr('id');
            var params = $.common.formToJSON(currentId);
            var data;
            params.attach = JSON.stringify(data);
            requrl = prefix + "/test/" + $("#type").val() + "/" + $("#money").val() + "/" + $("#channel").val()+"/"+$("#recipientId").val();
            var config = {
                url: requrl,
                type: "post",
                dataType: "json",
                data: params,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                    $.modal.disable();
                },
                success: function (result) {
                    $.modal.closeLoading();
                    if (result.code == web_status.SUCCESS) {
                        // alert("返回链接==="+result.msg);
                        if (result.msg != null) {
                            window.location = result.msg;
                        } else {
                            $.modal.alertSuccess("处理成功");
                        }
                    } else {
                        $.modal.alertError(result.msg);
                    }


                }
            };
            $.ajax(config)
        }
    }


    function changeType(){
        requrl=prefix+"/getChannel/"+$("#type").val();
        var config = {
            url:requrl ,
            type: "post",
            dataType: "json",
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                // $.modal.disable();
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $("#channel").html("<option value=\"\">所有</option>");
                    $.each(result.data, function(key, val) {
                        var option1 = $("<option>").val(val.channel).text(val.channelDesc);
                        $("#channel").append(option1);
                        // form.render('select');
                    });
                }else{
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config)
    }

    function changeChannel() {
        requrl=prefix+"/getRecipientInfo/"+$("#channel").val();
        var config = {
            url:requrl ,
            type: "post",
            dataType: "json",
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                // $.modal.disable();
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $("#recipientId").html("");
                    $.each(result.data, function(key, val) {
                        var option1 = $("<option>").val(val.id).text(val.realName);
                        $("#recipientId").append(option1);
                        // form.render('select');
                    });
                }else{
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config)
    }


</script>
</body>
</html>
